<template>
	<div class="sensor-list-container" ref="containerRef" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
		<div class="sensor-list-title">
			<template v-if="type == 1">几何</template>
			<template v-if="type == 2">力学</template>
			<template v-if="type == 3">光学</template>
			<template v-if="type == 4">电学</template>
			<template v-if="type == 5">热学</template>
			<template v-if="type == 6">声学</template>传感器列表
		</div>
		<div class='sensor-list-header flexrbc'>
			<div>传感器类型</div>
			<div>传感器点位</div>
			<div>监测值</div>
			<div class="data-time">数据时间</div>
		</div>
		<div class="sensor-list-table">
			<transition-group name="list" tag="div" class="transForm-container">
				<div class="sensor-table-row flexrbc" v-for="item in virtualData" :key="item.id">
					<div class='ellipsis'>{{item.type}}模态</div>
					<div class='ellipsis'>{{item.address}}</div>
					<div class='ellipsis'>{{item.value}}</div>
					<div class="data-time">{{formatTimeStamp(item.time)}}</div>
				</div>
			</transition-group>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				visibleCount: 20,
				virtualIndex: 0, // 虚拟索引持续增长
				timer: null,
				isHovering: false,
				scrollInterval: 600,
				allData: [],
				resizeObserver: null
			}
		},
		props: {
			data: {
				type: Array,
				default: () => []
			},
			type: {
				type: [Number, String],
				default: 0, // 1几何模态，2力学模态，3光学模态，4电学模态，5热学模态
			}
		},
		watch: {
			data: {
				handler() {
					this.initData();
				},
				deep: true
			},
			type() {
				this.$nextTick(() => {
					this.calculateVisibleCount()
					this.startScroll()
				})
			}
		},
		computed: {
			// 获取实际显示数据的起始索引
			realStartIndex() {
				return this.virtualIndex % this.allData.length
			},
			virtualData() {
				const dataLength = this.allData.length
				if (dataLength === 0) return [];
				// 数据不足时直接返回全部数据
				if (dataLength <= this.visibleCount) {
					return this.allData
				}
				const endIndex = this.realStartIndex + this.visibleCount
				const firstPart = this.allData.slice(this.realStartIndex, Math.min(endIndex, dataLength))

				// 当需要循环时补充开头部分
				if (endIndex > dataLength) {
					return [...firstPart, ...this.allData.slice(0, endIndex % dataLength)]
				}
				return firstPart
			}
		},
		mounted() {
			// 初始化尺寸监听
			this.resizeObserver = new ResizeObserver(() => {
				this.calculateVisibleCount()
				this.startScroll()
			})

			if (this.$refs.containerRef) {
				this.resizeObserver.observe(this.$refs.containerRef)
			}

			this.initData();
		},
		methods: {
			formatTimeStamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const second = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			calculateVisibleCount() {
				const container = this.$refs.containerRef
				if (!container) {
					this.visibleCount = 0
					return
				}

				const style = window.getComputedStyle(container)
				const paddingTop = parseFloat(style.paddingTop) || 0
				const paddingBottom = parseFloat(style.paddingBottom) || 0
				const contentHeight = container.clientHeight - paddingTop - paddingBottom

				// 精确计算可用高度（标题45px + 表头45px = 90px）
				const availableHeight = contentHeight - 90
				this.visibleCount = Math.max(Math.floor(availableHeight / 45), 1);

			},
			initData() {
				this.allData = this.data.map((item, index) => ({
					...item,
					id: `sensor-${Date.now()}-${index}` // 增强唯一性
				}))

				// 重置滚动位置
				this.virtualIndex = 0

				this.$nextTick(() => {
					this.calculateVisibleCount()
					this.startScroll()
				})
			},
			startScroll() {
				console.log(this.allData.length, 'this.allData.length')
				console.log(this.visibleCount, 'this.visibleCount')
				this.clearTimer()
				if (this.allData.length <= this.visibleCount) return

				this.timer = setInterval(() => {
					if (!this.isHovering) {
						this.virtualIndex = (this.virtualIndex + 1) % this.allData.length
					}
				}, this.scrollInterval)
			},
			handleMouseEnter() {
				this.isHovering = true
			},
			handleMouseLeave() {
				this.isHovering = false
			},
			clearTimer() {
				clearInterval(this.timer)
				this.timer = null
			}
		},
		beforeDestroy() {
			this.resizeObserver?.disconnect()
			this.clearTimer()
		}
	}
</script>

<style scoped lang='scss'>
	@import "@/styles/variables.scss"; 

	.sensor-list-container {
		width: 100%;
		height: 100%;
	}

	.sensor-list-title {
		width: 100%;
		height: 45px;
		line-height: 45px;
		padding: 0 20px !important;
	}

	.data-time {
		width: 160px !important;
	}

	.sensor-list-header {
		background: $primaryColor;
		height: 45px;
		line-height: 45px;
		padding: 0 4px !important;

		div {
			width: calc((100% - 160px) / 3);
			text-align: center;
			color: $menuActiveText;
		}


	}

	.list-enter-active,
	.list-leave-active {
		transition: all 0.6s ease;
		will-change: transform, opacity;
	}

	.list-enter-from {
		opacity: 0;
		transform: translateY(100%);
		/* 从下方进入 */
	}

	.list-leave-to {
		opacity: 0;
		transform: translateY(-100%);
		/* 向上淡出 */
	}

	.list-leave-active {
		position: absolute;
		width: 100%;
		-webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
		transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
		/* 更顺滑的贝塞尔曲线 */
	}

	.sensor-list-table {
		position: relative;
		height: calc(100% - 90px);
		overflow: hidden;
		will-change: transform, opacity;

		.transForm-container {
			height: 100%;
			overflow: hidden;


		}


	}

	.sensor-table-row {
		height: 45px;
		box-sizing: border-box;
		padding: 0 4px !important;

		div {
			height: 45px;
			line-height: 45px;
			width: calc((100% - 160px) / 3);
			text-align: center;
		}
	}
</style>